<template>
  <div class="dialogPhone">
    <van-popup v-model:show="show" position="bottom">
      <div class="box">
        <div>
          <p class="phone">{{ phone }}</p>
          <span class="copy" :data-clipboard-text="phone" @click="copyPhone"
            >复制号码</span
          >
        </div>
        <van-divider />
        <p class="i-call" @click="telPhone(phone)">
          <svg-icon icon-class="mobile" class="phoneSvg"></svg-icon>
          <span class="call">呼叫</span>
        </p>
      </div>
      <van-button type="default" block plain @click="show = false"
        >取消</van-button
      >
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Toast } from "vant";
import Clipboard from "clipboard";

const show = ref(false);
const phone = ref("");

// 控制弹框显示
const showFn = (ph: Number) => {
  show.value = !show.value;
  phone.value = ph;
};

// 复制号码
const copyPhone = () => {
  const clipboard = new Clipboard(".copy");
  clipboard.on("success", (e: any) => {
    show.value = false;
    Toast("复制成功");
    e.clearSelection();
    clipboard.destroy();
  });
  clipboard.on("error", (e: any) => {
    console.log("error", e);
  });
};
// 打电话
const telPhone = (phone) => {
  window.location.href = `tel:${phone}`
}

defineExpose({
  showFn,
});
</script>

<style lang="less" scoped>
.dialogPhone {
  /deep/ .van-popup {
    background: transparent;
    padding: 0 8px;
  }
  .box {
    background: #fff;
    border-radius: 10px;
    padding: 0 16px;
    .phone {
      padding: 20px 0;
      font-size: 22px;
      color: #303233;
      line-height: 26px;
    }
    p {
      display: flex;
      justify-content: center;
    }
    .copy {
      position: absolute;
      right: 24px;
      top: 25px;
      font-size: 14px;
      color: #c2c6cc;
      font-family: PingFang SC;
      letter-spacing: 1px;
    }
    .phoneSvg {
      width: 24px;
      height: 24px;
    }
    /deep/ .van-divider {
      margin: 0;
    }
    .i-call {
      padding: 16px 0;
      display: flex;
      align-items: center;
    }
    .call {
      color: #3e77fa;
      font-size: 18px;
      margin-left: 10px;
      line-height: 21px;
    }
  }
  /deep/.van-button {
    margin-bottom: 30px;
    margin-top: 5px;
    border-radius: 10px;
    height: 56px;
    color: #616366;
    font-size: 18px;
  }
}
</style>
